<template>

	<view class="identityAuthentication">
		<view class="card flex-around">
			<view class="header">

				<text class="avaterTitle">身份证照片</text>
				<view class="headerText">

					请确保上传的身份证照片信息 <text style="color: #1890FF;font-size: 14px;"> 真实有效、清晰可读</text>
				</view>
				<!-- 正面 -->
				<view class="facade">
					<view class="upLoad">
						<!-- <sunui-upimg :url="upPicUrl" :storageMode='storageMode' :header="header" :formData='imgFormData'  ref="upload2"
							backgroundImage='facade'backgroundColor='#fff' title="点击上传/正面" :size="['338rpx', '683rpx']"
							@upload="handleLoaded2" @change="handleChange2" :number="1">
							<template v-slot:icon>
								<uni-icons type="camera-filled" color="#1890FF" size="40"></uni-icons>
							</template>
						</sunui-upimg> -->
						<sunui-upimg1 :formData="imgFormData" :storageMode="storageMode"
							:header="header" :size="['338rpx', '683rpx']" btnName="点击上传/正面" :uploadServerUrl="upPicUrl"
							ref="selectimgandupload1" @uploaded="imgLoaded1" @change="imgsChange1" :maxFileNumber="1">
							<template v-slot:icon>
								<uni-icons type="camera-filled" color="#1890FF" size="40"></uni-icons>
							</template></sunui-upimg1>
					</view>
					<image class="avater" src="../../../static/Group 3148.png" mode=""></image>
				</view>
				<!-- 国徽背面 -->
				<view class="nationalEmblem">
					<view class="upLoad ">

						<sunui-upimg1  :formData="imgFormData" :storageMode="storageMode"
							:header="header" :size="['338rpx', '683rpx']" btnName="点击上传/国徽面" :uploadServerUrl="upPicUrl"
							ref="selectimgandupload2" @uploaded="imgLoaded2" @change="imgsChange2" :maxFileNumber="1">
							<template v-slot:icon>
								<uni-icons type="camera-filled" color="#1890FF" size="40"></uni-icons>
							</template></sunui-upimg1>


						<!-- 		<sunui-upimg :formData='imgFormData' :storageMode='storageMode' :url="upPicUrl" :header="header"
							:before-upload="onBeforeUpload" ref="upload1" backgroundImage='nationalEmblem'
							backgroundColor='#fff' title="点击上传/国徽面" :size="['338rpx', '683rpx']" @upload="handleLoaded1"
							@change="handleChange1" :number="1">
							<template v-slot:icon>
								<uni-icons type="camera-filled" color="#1890FF" size="40"></uni-icons>
							</template>
						</sunui-upimg> -->
						<!-- <image class="photo" src="../../../static/Group 3147.png" mode=""></image>
						<!-- 	<view class="marginTop15">
							<text>点击上传 </text>
							<text style="color: #1890FF;margin-left: 10rpx;">国徽面 </text>
						</view> -->
					</view>

					<image class="avater" src="../../../static/Group 3108.png" mode=""></image>
				</view>

				<view class="illustrate">
					<text>
						根据相关法律规定，需要通过实名认证才能进行线上交易，您的
						证件信息我们将严格保密~
					</text>
				</view>
			</view>

		</view>
		<!-- 身份证 姓名 -->
		<view class="card">
			<uni-forms :modelValue="form" label-position="top">
				<uni-forms-item label="身份证姓名" required labelWidth="180px">
					<input class="inputName" type="text" v-model="form.cardName" placeholder="请输入身份证姓名" />
				</uni-forms-item>

				<uni-forms-item label="身份证号码" required labelWidth="180px">
					
					<input class="inputName" type="number" maxlength="18"  v-model="form.cardNumber" placeholder="请输入身份证号码" />
				</uni-forms-item>
			</uni-forms>
		</view>

		
			<button  type="primary" 
								@click="identityFn()"	size="mini" class="logins">提交保存</button>
			
	</view>
</template>

<script>
	import {
		object2Url
	} from '@/utils/trans';
	import {
		mapMutations
	} from 'vuex'
	import {
		mapState
	} from 'vuex'
	import {
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				title: 'Hello',
				form: {
					cardName: '',
					cardNumber: '',
					// 身份正面
					cardStraight: '',
					// 身份反面
					cardReverse: '',
				},
				loading:false,
				img: [],
				storageMode: '',
				photos: 'http://tmp/oPvxqRtPPstDa128a34f30dbb644483d8ec6e94e75c9.jpg',
				upPicUrl: '',
				imgFormData: null,
				alyOssSignatureInfo: null,
				header: null,
				timeDate: '',
				suffix: '',
				uploaderArr: [],
				imgViewArr: [],
				imgStr: [],
				imgStr2: [],
				img2: [],
				// 数据回显
				formData:{},
				technicianDetail:{}

			}
		},
		onLoad() {
			this.getUploadConfig();
			this.init()

		},
		computed: {

			...mapGetters('user', ['taskCenter', 'technicianDetails']),

		},
		methods: {

			...mapMutations('user', ['identityAuthentication', 'uploadProgress','technicianDetailsFn']),

			init() {
				if (this.technicianDetails.authenticationNot == 3) {
					this.$sun.assignObject(this.form, {
						...this.technicianDetails
					})
					console.log(this.form)
					this.$refs.selectimgandupload1.setItems([this.form.cardStraight]);
					this.$refs.selectimgandupload2.setItems([this.form.cardReverse]);
				}

			},

			async getUploadConfig() {
				const result = await this.$http.get({
					url: this.$api.getStorageConfig,
					data: {}
				});
				if (result.code == 200) {
					this.storageMode = result.data.storageMode; // storageMode:2是‘阿里云’上传，3是‘七牛云’ 上传
					console.log('this.storageMode', this.storageMode);

				} else {
					console.log('result.message', result.message);
				}
			},



			// “上传图片”发生改变
			imgsChange1(file) {
				// 文件名
				this.timeDate = new Date().getTime();
				console.log('上传发生改变this.storageMode1111============', this.storageMode, '参数file', file);
				// 如果是2 上传  阿里云 3  七牛云
				if (this.storageMode == 2) {
					this.userOssSignature(file, 'imgsChange1');
	               this.loading=true
				}
				if (this.storageMode == 3) {
					if(file.length){
						this.loading=true
						this.upPicUrl = this.$api.qnyOssSignature;
						let filesNmae = 'nmoBackground_01.png'; // this.timeDate + 'png'
						this.imgFormData = {
							file: file,
							getsize: file.size,
							getContentType: ['image/png', 'image/jpeg'],
							getoriginalfilename: filesNmae,
							getName: filesNmae
						};
						this.$nextTick(() => {
							this.$refs.selectimgandupload1.upload(); //图片上传
						});
					}else{
						this.form.cardStraight='',
						this.imgStr = []
					}
				}
			},
			// 阿里云上传
			async userOssSignature(file, type) {
           
				console.log('this阿里云上传进入=======');
				const ts = new Date().getTime();
				const us = {
					ts
				};
				let url = this.$api.alyOssSignature + `${object2Url(us)}`;
				const res = await this.$http.get({
					url: url,
					data: {
						us: us
					}
				});
				this.ossInfo = res.data;
				this.upPicUrl = this.ossInfo?.host;
				// 获取上传图片名称和后缀
				console.log(file)

				if (file.length) {
					let fileUrl = file[0].url;
					let markIndex = fileUrl.lastIndexOf('.');
					this.suffix = fileUrl.substring(markIndex); //后缀

					console.log('this.ossInfo', this.ossInfo);
					this.imgFormData = {
						name: this.timeDate + this.suffix,
						key: this.timeDate + this.suffix, //上传图片的名字和路径（默认路径根目录，自定义目录：xxx/xxx.png）
						policy: this.ossInfo.policy,
						OSSAccessKeyId: this.ossInfo.accessId,
						success_action_status: '200',
						signature: this.ossInfo.signature
					};
					this.header = {
						'Access-Control-Allow-Origin': '*',
						'x-oss-callback-Authorization': 'access_token'
					};
					if (type == 'imgsChange1') {
						this.$nextTick(() => {
							this.$refs.selectimgandupload1.upload(); //图片上传
						});
					} else {
						this.$nextTick(() => {
							this.$refs.selectimgandupload2.upload(); //图片上传
						});
					}
               
					console.log('页面阿里云url22222222222222', this.ossInfo?.host + '/' + this.timeDate + this.suffix);
				} else {
					
					if(type=='imgsChange1'){
						console.log('imgsChange1')
						this.form.cardStraight='',
						this.imgStr = []
					}else{
						console.log('imgsChange2')
						this.form.cardReverse='',
						this.imgStr2 = []
					}
					
				}
                
			},

			// 上传图片返回
			imgLoaded1(e) {
				console.log('上传返回eeeee222============', e);
				try {
					this.img = [];
					for (let i = 0; i < e.length; i++) {
						this.img.push(e[i].url);
					}
					 
				} catch (e) {
					this.img = [];
				}
				console.log('this.img=======', this.img);
				this.imgStr = this.img
				console.log(this.imgStr)
				this.form.cardStraight = this.imgStr.length === 1 ? this.imgStr[0].toString() : this.imgStr.join(',');
				 this.loading=false
			},
			imgLoaded2(e) {
				console.log('上传返回eeeee222============', e);
				try {
					this.img2 = [];
					for (let i = 0; i < e.length; i++) {
						this.img2.push(e[i].url);
					}
					    
				} catch (e) {
					this.img2 = [];
				}
				console.log('this.img=======', this.img2);
				this.imgStr2 = this.img2
				console.log(this.imgStr2)
				this.form.cardReverse = this.imgStr2.length === 1 ? this.imgStr2[0].toString() : this.imgStr2.join(',');
				 this.loading=false
			},

			imgsChange2(file) {
				// 文件名
				this.timeDate = new Date().getTime();
				console.log('上传发生改变this.storageMode1111============', this.storageMode, '参数file', file);
				// 如果是2 上传  阿里云 3  七牛云
				if (this.storageMode == 2) {
					this.userOssSignature(file, 'imgsChange2');

				}
				if (this.storageMode == 3) {
					if(file.length){
						this.upPicUrl = this.$api.qnyOssSignature;
						let filesNmae = 'nmoBackground_01.png'; // this.timeDate + 'png'
						this.imgFormData = {
							file: file,
							getsize: file.size,
							getContentType: ['image/png', 'image/jpeg'],
							getoriginalfilename: filesNmae,
							getName: filesNmae
						};
						this.$nextTick(() => {
							this.$refs.selectimgandupload2.upload(); //图片上传
						});
					}else{
						
						this.form.cardReverse='',
						this.imgStr2 = []
					}
				}
			},

			async identityFn() {
				console.log('11111')
				console.log(this.technicianDetails.authenticationNot)
				if(this.technicianDetails.authenticationNot == 4){
					console.log(this.form)
					
					if (!this.form.cardName) {
						
						this.$sun.toast('请输入身份证姓名');
						return false;
						// !this.form.cardNumber
					} else if (/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.form.cardNumber)) {
						this.$sun.toast('请输入身份证号码');
						return false;
					} else if (!(this.form.cardStraight)) {
						this.$sun.toast('请输入正确的正面');
						return false;
					}else if(!this.form.cardReverse){
						this.$sun.toast('请输入正确的反面/国徽面');
						return false;
					}
					this.identityAuthentication(this.form)
					
					this.uploadProgress({
						status: true,
						name: 'uploadAvatar'
					})
					// 退出这个页面
					 this.$sun.navBack();
				}
				if (this.technicianDetails.authenticationNot == 3) {
					if (!this.form.cardName) {
						this.$sun.toast('请输入身份证姓名');
						return false;
					} else if (!this.form.cardNumber) {
						this.$sun.toast('请输入身份证号码');
						return false;
					} else if (!(this.form.cardStraight)) {
						this.$sun.toast('请输入正确的正面');
						return false;
					}else if(!this.form.cardReverse){
						this.$sun.toast('请输入正确的反面/国徽面');
						return false;
					}
					console.log(this.technicianDetails)
					this.formData = this.technicianDetails
					const allForm={...this.formData,...this.form}
					console.log(JSON.stringify(allForm) +'========================')
					const saveRes = await this.$http.put({
						url: this.$api.technicianModifyIphone,
						data: {
							...allForm
						}
					});
					
					 
					this.technicianDetail = allForm
					console.log(saveRes.data+'======================')
					this.technicianDetailsFn(this.technicianDetail ?this.technicianDetail:{})
					
					this.$sun.navBack();
				}else if(this.technicianDetails?.authenticationNot!==4){
					console.log(this.form)
					if (!this.form.cardName) {
						this.$sun.toast('请输入身份证姓名');
						return false;
					} else if (!this.form.cardNumber) {
						this.$sun.toast('请输入身份证号码');
						return false;
					} else if (!(this.form.cardStraight)) {
						this.$sun.toast('请输入正确的正面');
						return false;
					}else if(!this.form.cardReverse){
						this.$sun.toast('请输入正确的反面/国徽面');
						return false;
					}
					this.identityAuthentication(this.form)
					
					this.uploadProgress({
						status: true,
						name: 'uploadAvatar'
					})
					// 退出这个页面
				     this.$sun.navBack();
				}
				
			
			}

		}
	}
</script>

<style lang="less" scoped>
	.identityAuthentication {
		.card {
			width: 708rpx;

			border-radius: 20rpx;
			background: #FFF;
			margin-left: 20rpx;
			padding: 22rpx;
			box-sizing: border-box;

			.header {
				.avaterTitle {
					color: #000;
					font-weight: 600;
					font-size: 32rpx;

				}

				.headerText {
					font-size: 28rpx;
					margin: 15rpx 0 25rpx 0;

				}
			}

			.nationalEmblem {
				margin: 36rpx 0 24rpx 0;
				position: relative;

				.upLoad {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);

					.photo {


						width: 86rpx;
						height: 86rpx;

					}

					.marginTop15 {
						margin-top: 15rpx;
						font-size: 16px;
					}
				}

				.avater {
					width: 682rpx;
					height: 338rpx;
				}
			}

			.facade {
				position: relative;

				.avater {
					width: 682rpx;
					height: 338rpx;
				}

				.upLoad {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);

					.photo {


						width: 86rpx;
						height: 86rpx;

					}

					.marginTop15 {
						margin-top: 15rpx;
						font-size: 16px;
					}
				}
			}

			.illustrate {
				margin-top: 24rpx;
				color: #666;
				font-size: 24rpx;
			}

		}

		// .sumbit-btn {
		// 	width: 708rpx;
		// 	margin-left: 20rpx;
		// 	height: 100rpx;
		// 	color: #fff;
		// 	border-radius: 10px;
		// 	background-color: #1890FF;
		// }
		button {
			display: inline-flex !important;
			align-items: center;
			justify-content: center;
			height: 70rpx;
			line-height: 1;
			vertical-align: middle;
			-webkit-appearance: none;
			-webkit-text-size-adjust: 100%;
			box-sizing: border-box;
			font-size: 32rpx;
			white-space: nowrap;
			margin: 0;
			padding: 0rpx 120rpx;
			overflow: visible;
			border-radius: 10rpx;
			font-weight: bold;
			margin: auto;
		}
		
		.logins
		 {
			width: 708rpx;
			margin-left: 20rpx;
			height: 100rpx;
			color: #fff;
			border-radius: 10px;
			background-color: #1890FF;
		}
		
	
		
	}
</style>